<template>
	<div style="padding-left: 20px;">
		<el-card class="box-card" style="height: 70vh;">
			<div slot="header" class="clearfix">
				<span
					style="line-height: 18px; color: rgba(0,0,0,0.45); font-size: 16px; margin-bottom: 12px;">消息中心</span>
				<i class="el-icon-refresh" @click="getList"></i>
				<el-button style="float: right; padding: 3px 0" icon="plus" type="text" @click="addMsg">发送</el-button>
			</div>
			<div v-for="(item,index) in list" class="task-row" @click="editMsg(index, item)">
				<span>
					{{ item.msgTitle }}
				</span>
				<el-tag style="float: right;" :type="item.msgType.indexOf('1') == -1 ? 'danger' : ''">
					{{item.msgTypeName}}
				</el-tag>
				<el-divider></el-divider>
			</div>
		</el-card>
		<el-dialog width="1200px" :visible.sync="msgAddFormVisible" center>
			<div slot="title" class="dialog-title">
				<div class="dialog-header">
					{{$t('system.msg.msgInfo')}}
				</div>
			</div>
			<msgEdit ref="msgEdit" :msgInfo="msgInfo" />
			<div slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="msgAddFormVisible = false">
						{{$t('common.cancelBtn')}}
					</el-button>
					<el-button icon="el-icon-check" type="primary" @click="save">{{$t('common.saveBtn')}}</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import request from '@/utils/request'
	import msgEdit from '@/views/system/msg/msg-edit.vue'
	export default {
		name: 'msgCard',
		components: {
			msgEdit
		},
		data() {
			return {
				list: [],
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 20,
					total: 0,
					currentPage: 1
				},
				searchFrom: {

				},
				//正在编辑的用户信息
				msgInfo: {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				},
				//更多检索条件
				moreSearch: true,
				//弹窗是否可见
				msgAddFormVisible: false,
				socket: null
			}
		},
		//页面初始化加载
		created() {
			this.getList();
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/msg/queryByUser',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			taskDetail() {
				this.$router.push(`/flowable/task/todo`)
			},
			//保存用户信息
			save() {
				var html = this.$refs.msgEdit.getHtml();
				var url = '/system/msg/insert';
				if (this.msgInfo.msgId) {
					url = '/system/msg/update';
				}
				debugger
				this.msgInfo.msgType = this.msgInfo.msgTypeArr.toString();
				this.msgInfo.msgReceiver = this.msgInfo.msgReceiverArr.toString();
				this.msgInfo.msgContentHtml = html;
				request({
					url: url,
					method: 'post',
					data: this.msgInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.msgAddFormVisible = false;
				})
			},
			//添加
			addMsg() {
				this.msgInfo = {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				}
				this.msgAddFormVisible = true;
			},
			//编辑
			editMsg(index, row) {
				this.msgInfo = {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				}
				this.msgInfo = row;
				this.msgInfo.msgTypeArr = this.msgInfo.msgType.split(",");
				this.msgInfo.msgReceiverArr = this.msgInfo.msgReceiver.split(",");
				this.msgAddFormVisible = true;
			},
			//删除用户
			deleteMsg(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/msg/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.msgAddFormVisible = false;
				})
			},
		}
	}
</script>

<style>
	.task-row {
		/* font-weight: bold; */
		font-size: 14px;
		line-height: 18px;
		cursor: pointer;
	}

	.item {
		padding: 18px 0;
	}

	.el-divider--horizontal {
		margin: 13px 0 !important;
	}
</style>
